<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				//$("div#a2").text("<h1>We change lives</h1>");
				$("div#a2").html("<h1>We change lives</h1>");
				$("#chgBorder").click(function(){
					var d=document.getElementById("ad");
					$(d).css({"border":"4px ridge green","border-radius":"40px","width":"500px","overflow":"hidden"});
					alert("原来高度是:"+$(d).height());
					$(d).height("800px");
				});
				$("#hide").click(function(){
					
					//this指代当前发生事件的对象
					if($(this).val()=="隐藏")
					{
						$(this).val("显示"); 
						//$("#ad").hide(2000);
						//$("#ad").fadeOut(4000);
						//$("#ad").slideUp(2000);
						$("#ad img").animate({
							width:"50px",
							height:"300px"
						},1000);
					}	
					else{
						$(this).val("隐藏"); 
						//this.value="隐藏";
						//$("#ad").show(2000);
						//$("#ad").fadeIn(4000);
						$("#ad img").slideDown(2000);
					}
					/* if(this.value=="隐藏")
					{
						this.value="显示";
						$("#ad").hide();
					}	
					else{
						this.value="隐藏";
						$("#ad").show();
					} */
						
				});
				$(window).resize(function(){
					var $d=$("#ad");
					var h=$d.height();
					console.log("高度是："+h);
					$d.height(h*0.8);
				});
			});
		</script>
	</head>
	<body>
		<div id="a2">
			
		</div>
		<div id="ad"  >
			<img src="../images/4.jpg"/>
		</div>
		<input type="button" value="改变边框" id="chgBorder"/>
		<input type="button" value="隐藏" id="hide"/>
		<input type="button" value="改变边框" id="chgBorder"/>
	</body>
</html>
